<template>
  <a-cascader :options="options"
              :placeholder="placeholder"
              :value="value"
              @change="handleChange"
  />
</template>


<script setup>
import {Form} from 'ant-design-vue';
import {city, district, province} from '../../utils/province-city-districts';

const {
  control,
  placeholder,
  value
} = defineProps(['control', 'placeholder', 'value']);
const emit = defineEmits(['update:value']);
const formItemContext = Form.useInjectFormItemContext();

const options = computed(() => {
  return province.map(p => ({
    label: p.name,
    value: p.id,
    children: city[p.id]?.map(c => {
      return {
        label: c.name,
        value: c.id,
        children: district[c.id]?.map(d => {
          return {
            label: d.name,
            value: d.name
          };
        })
      };
    })
  }));
});

const handleChange = async value => {
  emit('update:value', value[value.length - 1])
  formItemContext.onFieldChange();
};
</script>
